<template>
  <div>
  	<transition name="slide-top">
	  	<div class="popup" v-show="isShow">
	  		<div class="popup-header">
	  			<span class="close" @click="toggleShow"><x-icon type="ios-close-empty" size="24"></x-icon></span>
	  			<h3>{{ title }}</h3>
	  			<span class="success" @click="success">确定</span>
	  		</div>
				<div class="popup-body">
					<group gutter="0">
	      		<radio :options="radioItems" @on-change="change"></radio>
	    		</group>
				</div>
	  	</div>
  	</transition>
  	<transition name="fade">
  		<div class="mask" v-if="isShow" @click="toggleShow"></div>
  	</transition>
  </div>
</template>

<script>
import { Radio, Group } from 'vux'
export default {
	props: {
		title: {
			type: String,
			default: ''
		}
	},
	components: {
		Radio,
		Group
	},
  data () {
  	return {
  		type: '',
  		isShow: false,
  		radioItems: [
  			{
  				key: '1',
  				value: '微信',
  				icon: require('../../assets/images/WeChatPay.png')
  			},
  			{
  				key: '2',
  				value: '支付宝',
  				icon: require('../../assets/images/alipay.png')
  			},
  			{
  				key: '3',
  				value: '银行卡',
  				icon: require('../../assets/images/unionPay.png')
  			}
  		]
  	}
  },
  methods: {
  	change (val, label) {
  		this.type = label
  	},
  	success () {
  		this.$emit('change-type', this.type)
  		this.isShow = false
  	},
  	toggleShow () {
  		this.isShow = !this.isShow
  	}
  }
}
</script>

<style scoped>
.popup {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	z-index: 101;
	background: #fff;
}
.popup-header {
	position: relative;
}
.popup-header h3 {
	font-size: 14px;
	color: #333;
	text-align: center;
	padding: 6px 15px;
}
.close {
	position: absolute;
	left: 10px;
	top: 8px;
}
.success {
	position: absolute;
	right: 15px;
	top: 0;
	font-size: 14px;
	line-height: 40px;
	color: #42b983;
}
.close svg {
	fill: #999;
}
.mask {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	background: rgba(0, 0, 0, .5);
	z-index: 100;
}
.slide-top-enter-active {
  transition: all .3s;
  transform: translateY(0);
}
.slide-top-leave-active {
  transition: all .3s;
  transform: translateY(100%);
}
.slide-top-enter,
.slide-top-leave {
  transform: translateY(100%);
}
.fade-enter-active {
  transition: all .3s;
  opacity: 1;
}
.fade-leave-active {
  transition: all .3s;
  opacity: 0;
}
.fade-enter,
.fade-leave {
  opacity: 0;
}
</style>
